<!--
 * @Author: 张俊辉 zhangjunhui@mangocosmos.com
 * @Date: 2025-04-25 16:00:50
 * @LastEditors: 张俊辉 zhangjunhui@mangocosmos.com
 * @LastEditTime: 2025-05-08 19:14:02
 * @FilePath: \threejs\my-vue-project\src\components\HelloWorld.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template> </template>

<script>
// 引入three.js
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import Stats from './build/stats.module'
// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    // 实例化一个gui对象
    const gui = new GUI()
    //改变交互界面style属性
    gui.domElement.style.right = '0px'
    gui.domElement.style.width = '300px'
    // //创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
    // const obj = {
    //   x: 30
    // }
    // // gui增加交互界面，用来改变obj对应属性
    // gui.add(obj, 'x', 0, 100)
    const obj = {
      x: 30,
      y: 60,
      z: 300
    }
    // gui界面上增加交互界面，改变obj对应属性
    gui.add(obj, 'x', 0, 100)
    gui.add(obj, 'y', 0, 50)
    gui.add(obj, 'z', 0, 60)

    // 创建3D场景对象Scene
    const scene = new THREE.Scene()
    const axesHelper = new THREE.AxesHelper(150)
    scene.add(axesHelper)
    const pointLight = new THREE.PointLight(0xffffff, 1.0)
    // pointLight.intensity = 10000.0 //光照强度
    //点光源位置
    pointLight.position.set(400, 200, 200) //点光源放在x轴上
    scene.add(pointLight)
    // 通过GUI改变mesh.position对象的xyz属性
    gui.add(pointLight, 'intensity', 0, 10000.0)
    //创建一个长方体几何对象Geometry
    const geometry = new THREE.BoxGeometry(20, 20, 20)
    //材质对象Material
    const material = new THREE.MeshLambertMaterial({
      color: 0x00ffff, //设置材质颜色
      transparent: true, //开启透明
      opacity: 0.5 //设置透明度
    })
    for (let i = 0; i < 5; i++) {
      for (let j = 0; j < 5; j++) {
        const mesh = new THREE.Mesh(geometry, material) //网格模型对象Mesh
        // 在XOZ平面上分布
        mesh.position.set(i * 200, 0, j * 200)
        gui.add(mesh.position, 'x', 0, 1000)
        // gui.add(mesh.position, 'y', 0, 180)
        // gui.add(mesh.position, 'z', 0, 180)

        scene.add(mesh) //网格模型添加到场景中
      }
    }

    // //环境光强度调整为0.8
    const ambient = new THREE.AmbientLight(0xffffff, 0.4)
    scene.add(ambient)

    const width = window.innerWidth // 窗口宽度
    const height = window.innerHeight // 窗口高度
    // const camera = new THREE.PerspectiveCamera();
    // camera.position.set(200, 200, 200);
    // camera.lookAt(0, 0, 0);
    // const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    // //在原来相机位置基础上拉远，可以观察到更大的范围
    // camera.position.set(800, 800, 800);
    // camera.lookAt(0, 0, 0);

    // const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 8000)
    // camera.position.set(292, 223, 185)
    // 超出视锥体远裁界面的范围的会被剪裁掉，不渲染，可以调整far参数适配
    camera.position.set(2000, 2000, 1000)
    camera.lookAt(0, 0, 0)

    // // 改变相机观察目标点
    // camera.lookAt(1000, 1000, 1000)

    const renderer = new THREE.WebGLRenderer({
      antialias: true
    })
    // 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(width, height)
    renderer.render(scene, camera) //执行渲染操作
    renderer.setClearColor(0x444444, 1) //设置背景颜色

    document.body.appendChild(renderer.domElement)

    // 设置相机控件轨道控制器OrbitControls
    const controls = new OrbitControls(camera, renderer.domElement)
    // 相机控件.target属性在OrbitControls.js内部表示相机目标观察点，默认0,0,0
    // console.log('controls.target', controls.target);
    controls.target.set(1000, 0, 1000)
    controls.update() //update()函数内会执行camera.lookAt(controls.targe)
  }
}
</script>
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
